<style>
    .vux-button-group>a.hover, .vux-button-group>a.vux-button-group-current, .vux-button-group>a:active {
        background-color: rgb(43,165,187);
        border-color: rgb(43,165,187);
        color: rgb(221,221,221);
    }
    .vux-button-group>a:first-child ,.vux-button-group>a:last-child {
        border-radius:0
    }
    .weui_btn_primary {
        background-color: rgb(43,165,187);
        color: rgb(221,221,221);
    }
    .default_box {
        width: 120px; 
        height: 50px; 
        line-height:50px;
        display: inline-block;
        border: 2px solid rgb(221,221,221);
        margin-left: 10px;
        margin-top: 11px;
        text-align: center
    }
    .selected_box {
        border: 2px solid rgb(255,150,18);
    }
    .weui-input {
        text-align: center;
        border: 0;
        width: 120px;
        height:50px;
    }
    .weui_input {
        width: 100%;
        height: 30px;
    }
    .weui_cells {
        border-radius: 5px;
        border: 1px solid #ddd;
        margin-bottom: 20px;
    }
    .weui_cells:before {
        border: 0
    }
    .weui_cells:after {
        width: 0;
        height:0;
    }
</style>
<template>
    <div style="  background-color: rgb(240,240,240);">
	  	<x-header style="background-color: rgb(43,165,187);" :left-options="{backText: '返回', showBack: true }">
            <span style=" color: rgb(221,221,221); font-size:14px; ">充值缴费</span>
        </x-header>
        <div class="">
            <group title="">
                <cell title="您的手机号码" value=""></cell>
                <cell title="187****4562" value="通讯录"></cell>
            </group>
            <button-tab style="margin-top: 20px">
                <button-tab-item selected  @click="selectMenuRe">充值缴费</button-tab-item>
                <button-tab-item  @click="selectMenuVr">充值卡充值</button-tab-item>
            </button-tab>
            <div v-if="showType" style=" padding: 10px 0 20px; background-color: #fff;">
                <checker :value.sync="selected" @on-change="changeSelect" default-item-class="default_box" selected-item-class="selected_box" >
                    <checker-item v-for="price in priceList" :value="price.value">{{ price.name }}</checker-item>
                    <div class="default_box">
                        <input class="weui-input" v-model="custom.value" type="number" placeholder="{{custom.default}}" @focus="chFocus"/>
                    </div>
                </checker>
            </div>
            <div v-else style=" padding: 10px 0; background-color: #fff;">
                <group title="请输入充值卡密码">
                    <x-input title="" placeholder=""></x-input>
                </group>
            </div>
            <group>
                <x-button type="primary" @click="click">立即充值</x-button>
            </group>
            <actionsheet :show.sync="show" :menus="menus" @on-click-menu="clickMenu" ></actionsheet>
        </div>
    </div>
</template>
<script>
    import XHeader from 'vux/dist/components/x-header'
    import Group from 'vux/dist/components/group'
    import Cell from 'vux/dist/components/cell'
    import ButtonTab from 'vux/dist/components/button-tab'
    import ButtonTabItem from 'vux/dist/components/button-tab-item'
    import XButton from 'vux/dist/components/x-button'
    import Checker from 'vux/dist/components/checker'
    import CheckerItem from 'vux/dist/components/checker-item'
    import XInput from 'vux/dist/components/x-input'
    import Actionsheet from 'vux/dist/components/actionsheet'

    export default {
    	components: {
    		XHeader,
            Group,
            Cell,
            ButtonTab,
            ButtonTabItem,
            XButton,
            Checker,
            CheckerItem,
            XInput,
            Actionsheet
    	},
        ready (){
            var weixin = `
            <div style="background-color: rgb(240,240,240); height: 36px;line-height: 36px;"><img style="float:left;top: 6px;position: relative;left: 82px; width: 25px; height: 25px" src="./src/img/weixin.png">微信支付</div>
            `;
            this.menus.weixin = weixin;
            var zhifubao = `
            <div style="background-color: rgb(240,240,240); height: 36px;line-height: 36px;"><img style="float:left;top: 6px;position: relative;left: 82px; width: 25px; height: 25px" src="./src/img/zhifubao.png">支付宝支付</div>
            `;
            this.menus.zhifubao = zhifubao;
        },
        data: function () {
        	return {
        		priceList: [
                    { id: 1, name: "10元", value: '10'},
                    { id: 2, name: "30元", value: '30'},
                    { id: 3, name: "50元", value: '50'},
                    { id: 4, name: "100元", value: '100'},
                    { id: 5, name: "200元", value: '200'},
                    { id: 6, name: "300元", value: '300'},
                    { id: 7, name: "400元", value: '400'},
                    { id: 8, name: "500元", value: '500'}
                ],
                custom: { 
                    value: '',
                    default: '自定义'
                },
                selected: '100',
                show: false,
                menus: {
                    weixin: '',
                    zhifubao: '' 
                },
                showType: true
        	}
        },
        methods: {
            chFocus: function() {
                this.custom.default= '10~500的整数';
            },
            click: function() {
                this.show= true
                console.log(typeof Number(this.custom.value))
            },
            changeSelect: function(key)    {
                /*this.$http.post( Config.serverHost() + "", key).then( function(res) {
                    
                })*/
            },
            clickMenu: function(key) {
                this.$route.router.go({ name: 'PayWec', params: { key: key} })
                if ( key=="weixin" ) {
                  /*this.$http.post( getBrandWCPayRequest, 参数).then( function () {

                  })*/
                }else if(key=="zhifubao") {
                  /*this.$route.post(支付宝接口,参数).then( function () {

                  })*/
                }
            },
            selectMenuRe: function() {
                this.showType= true
            },
            selectMenuVr: function() {
                this.showType= false
            }
        }
    }
</script>